<template>
  <div id="remind">
    <div class="title">
      <Icon size="18" type="md-list-box"/>
      车辆预警
      <Divider/>
    </div>
    <div class="table">
      <Table :columns="columns" :data="remind" border width="892">
        <template slot="name" slot-scope="{ row }">
          <strong>{{ row.name }}</strong>
        </template>
        <template slot="action" slot-scope="{ row, index }">
          <div class="btns">
            <Button size="small" style="color:#2d8cf0" type="text" @click="show(index)">
              <Icon size="17" type="ios-arrow-dropright-circle"/>
              详情
            </Button>
          </div>
        </template>
      </Table>
    </div>
    <Divider/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '预警项目',
          key: 'project',
          width: 230,
          align: 'center',
          sortable: true
        },
        {
          title: '接收消息用户',
          key: 'target',
          width: 150,
          align: 'center',
          sortable: true
        },
        {
          title: '提醒时间',
          key: 'type',
          width: 150,
          align: 'center',
          sortable: true
        },
        {
          title: '间隔时间',
          key: 'interval',
          width: 150,
          align: 'center',
          sortable: true
        },
        {
          title: '操作',
          slot: 'action',
          width: 150,
          align: 'center'
        }
      ],
      remind: [
        {
          project: '二级维护预警',
          type: '提前10天',
          cellClassName: {
            project: 'addProject'
          }
        },
        {
          project: '车辆年检预警（五年以内）',
          type: '提前1月',
          interval: '一年',
          cellClassName: {
            project: 'addProject'
          }
        },
        {
          project: '车辆年检预警（五年以上）',
          type: '提前1月',
          interval: '半年',
          cellClassName: {
            project: 'addProject'
          }
        },
        {
          project: '气瓶年检',
          type: '提前2月',
          cellClassName: {
            project: 'addProject'
          }
        },
        {
          project: '纯电动车定期保养',
          type: '提前2月',
          cellClassName: {
            project: 'addProject'
          }
        }
      ]
    }
  }
}
</script>
